<script setup>
  import router from '@/router'
  import { ref, watch } from 'vue'
  import menus from './menus.vue'
  import { projectStore } from '@/store/project'
  import { houseStore } from '@/store/house'
  import { menuStore } from '__store/menu'

  const menuHeight = ref(window.innerHeight - 50)
  window.addEventListener(
    'resize',
    () => (menuHeight.value = window.innerHeight - (menuStore().type == 'project' ? 150 : 50))
  )

  watch(
    () => menuStore().type,
    () => {
      menuHeight.value = window.innerHeight - (menuStore().type == 'project' ? 150 : 50)
    }
  )

  function onBack() {
    menuStore().choiceRoot()
    router.goRoot()
  }
  function onBackHouse() {
    menuStore().choiceRoot()
    router.goRoot('house/list')
  }
</script>

<template>
  <div class="item">
    <img
      src="https://static.tospurfang.com/channel/pclogo.png"
      style="display: inline-block; width: 30px; height: 30px; margin: 15px 5px 0 0" />
    <span>同联好房通</span>
  </div>
  <div v-if="menuStore().type == 'project'" class="project-name">
    {{ projectStore().name }}
  </div>
  <div v-else-if="menuStore().type == 'house'" class="project-name">
    {{ houseStore().name }}
  </div>
  <div style="overflow-y: auto; overflow-x: hidden" :style="{ maxHeight: menuHeight + 'px' }">
    <menus />
  </div>
  <div v-if="menuStore().type == 'project'" class="backHome" @click="onBack">
    <Icon type="md-arrow-back" />
    返回项目列表
  </div>
  <div v-else-if="menuStore().type == 'house'" class="backHome" @click="onBackHouse">
    <Icon type="md-arrow-back" />
    返回房源列表
  </div>
</template>

<style scoped lang="scss">
  @import url('@/assets/css/sider.scss');
  .item {
    height: 62px;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    padding-left: 20px;
    color: #ffffff;
    line-height: 62px;
  }
  .project-name {
    padding: 11px 24px;
    height: 47px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border-top: 1px solid #9098af;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    .iconfont {
      font-size: 14px;
      margin-right: 8px;
    }
  }
  .backHome {
    cursor: pointer;
    padding: 11px 24px;
    height: 47px;
    font-size: 14px;
    color: #9098af;
    border-top: 1px solid #9098af;
    transition: all 0.2s ease-in-out;

    .ivu-icon {
      font-size: 14px;
      margin-right: 8px;
    }
  }
  .backHome:hover {
    color: #fff;
    background: #515a6e;
  }
</style>
